<template>
	<view class="container">
		<view class="page-header">
			<view class="page-header-title">
				填写训练报告
			</view>
			<view class="page-header-con">
				私教课程名称 - 学员姓名
			</view>
		</view>
		<form @submit.prevent="submitForm">
			<view class="form-group">
				<view class="form-label">学员姓名</view>
				<input class="form-input" type="text" v-model="formData.clientName" disabled />
			</view>

			<view class="form-group">
				<view class="form-label">课程名称</view>
				<input class="form-input" type="text" v-model="formData.courseName" disabled />
			</view>

			<view class="form-group">
				<view class="form-label">上课日期</view>
				<view class="form-input date-input">
					{{ formData.classDate }}
				</view>
			</view>

			<view class="form-group">
				<view class="form-label">上课时间</view>
				<view class="form-input date-input">
					{{ formData.classTime }}
				</view>
			</view>
			<view class="form-group">
				<view class="form-label">训练时长</view>
				<view class="form-input date-input">
					{{ formattedDuration }}
				</view>
			</view>
			<view class="form-group">
				<view class="form-label">主要训练内容</view>
				<textarea class="form-textarea" v-model="formData.exercisesPerformed"
					placeholder="记录本次课程的主要训练动作和组数..." />
			</view>

			<view class="form-group">
				<view class="form-label">学员反馈</view>
				<textarea class="form-textarea" v-model="formData.clientFeedback" placeholder="记录学员的感受、问题或特殊情况..." />
			</view>

			<view class="form-group">
				<view class="form-label">教练建议与总结</view>
				<textarea class="form-textarea" v-model="formData.coachNotes" placeholder="教练对本次课程的总结和后续训练建议..." />
			</view>

			<button class="btn-submit" @click="submitForm">提交报告</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					clientName: '',
					courseName: '',
					classDate: '',
					classTime: '',
					hours: '0', // 替换原来的duration
					minutes: '0', // 新增分钟字段
					exercisesPerformed: '',
					clientFeedback: '',
					coachNotes: '',
					userId: 2, // 学员ID，这里写死为2
					coursesId: '112505230002' // 课程ID，这里写死为112505230002
				}
			};
		},
		computed: {
			// 格式化训练时长显示
			formattedDuration() {
				const hours = parseInt(this.formData.hours || '0');
				const minutes = parseInt(this.formData.minutes || '0');

				if (hours > 0 && minutes > 0) {
					return `${hours}小时${minutes}分钟`;
				} else if (hours > 0) {
					return `${hours}小时`;
				} else {
					return `${minutes}分钟`;
				}
			}
		},
		onLoad(options) {
			if (options.courseData) {
				const courseData = JSON.parse(decodeURIComponent(options.courseData));
				console.log("接收到的课程数据:", courseData);
				this.formData.userId = courseData.userName[0].id;
				this.formData.coursesId = courseData.id;
				// 设置学员姓名
				this.formData.clientName = courseData.userName[0].nickname;

				// 设置课程名称
				this.formData.courseName = courseData.name || '未知课程';

				// 处理上课日期 - 从startTime提取日期部分 (YYYY-MM-DD)
				const startDate = new Date(courseData.startTime);
				if (!isNaN(startDate.getTime())) {
					const year = startDate.getFullYear();
					const month = String(startDate.getMonth() + 1).padStart(2, '0');
					const day = String(startDate.getDate()).padStart(2, '0');
					this.formData.classDate = `${year}-${month}-${day}`;
				} else {
					this.formData.classDate = '日期格式错误';
				}

				// 处理上课时间 - 从startTime和endTime提取时间部分 (HH:MM-HH:MM)
				const startTime = new Date(courseData.startTime);
				const endTime = new Date(courseData.endTime);

				if (!isNaN(startTime.getTime()) && !isNaN(endTime.getTime())) {
					const startHours = String(startTime.getHours()).padStart(2, '0');
					const startMinutes = String(startTime.getMinutes()).padStart(2, '0');
					const endHours = String(endTime.getHours()).padStart(2, '0');
					const endMinutes = String(endTime.getMinutes()).padStart(2, '0');

					this.formData.classTime = `${startHours}:${startMinutes} - ${endHours}:${endMinutes}`;
				} else {
					this.formData.classTime = '时间格式错误';
				}

				// 计算默认训练时长（转换为小时和分钟）
				if (courseData.startTime && courseData.endTime) {
					const startTime = new Date(courseData.startTime);
					const endTime = new Date(courseData.endTime);

					if (!isNaN(startTime.getTime()) && !isNaN(endTime.getTime())) {
						// 计算分钟差
						const durationMs = endTime - startTime;
						const durationMinutes = Math.round(durationMs / 60000); // 毫秒转分钟

						if (durationMinutes > 0) {
							// 转换为小时和分钟
							this.formData.hours = Math.floor(durationMinutes / 60).toString();
							this.formData.minutes = (durationMinutes % 60).toString();
						}
					}
				}

				// 可以在这里添加页面标题
				uni.setNavigationBarTitle({
					title: '填写训练报告 - ' + this.formData.courseName
				});
			}
		},
		methods: {
			submitForm() {
				// 表单验证 - 检查时长
				const hours = parseInt(this.formData.hours || '0');
				const minutes = parseInt(this.formData.minutes || '0');
				const totalMinutes = hours * 60 + minutes;

				if (totalMinutes <= 0) {
					uni.showToast({
						title: '请输入有效的训练时长',
						icon: 'none'
					});
					return;
				}

				if (!this.formData.exercisesPerformed) {
					uni.showToast({
						title: '请输入主要训练内容',
						icon: 'none'
					});
					return;
				}

				// 显示加载中
				uni.showLoading({
					title: '提交中...'
				});

				// 构造API所需的参数
				const apiData = {
					userId: this.formData.userId, // 学员ID
					coursesId: this.formData.coursesId, // 课程ID
					trainingContent: this.formData.exercisesPerformed, // 训练内容
					feedback: this.formData.clientFeedback || '无', // 学员反馈
					suggestion: this.formData.coachNotes || '无' // 教练建议
				};

				// 调用API提交数据
				uni.request({
					url:'https://ironstar.vip/wxapi/gym/TrainingReports/insert',
					method: 'POST',
					header: {
						//设置请求头信息
						'X-Requested-With': 'XMLHttpRequest',
						"Accept": "application/json",
						"Content-Type": "application/x-www-form-urlencoded"
					},
					data: apiData,
					success: (res) => {
						if (res.data) {
							uni.showModal({
								title: '提交成功',
								content: '训练报告已成功提交',
								showCancel: false,
								success: (res) => {
									if (res.confirm) {
										uni.navigateBack();
									}
								}
							});
						} 
					}
				});
			},
			submitForm2() {
				// 表单验证 - 检查时长
				const hours = parseInt(this.formData.hours || '0');
				const minutes = parseInt(this.formData.minutes || '0');
				const totalMinutes = hours * 60 + minutes;

				if (totalMinutes <= 0) {
					uni.showToast({
						title: '请输入有效的训练时长',
						icon: 'none'
					});
					return;
				}

				if (!this.formData.exercisesPerformed) {
					uni.showToast({
						title: '请输入主要训练内容',
						icon: 'none'
					});
					return;
				}
				// 构造API所需的参数
				const data = {
					userId: this.formData.userId, // 学员ID
					coursesId: this.formData.coursesId, // 课程ID
					trainingContent: this.formData.exercisesPerformed, // 训练内容
					feedback: this.formData.clientFeedback || '无', // 学员反馈
					suggestion: this.formData.coachNotes || '无' // 教练建议
				};
				this.request('gym/TrainingReports/insert', data, 'POST').then(res => {
					if (res) {
						uni.showModal({
							title: '提交成功',
							content: '训练报告已成功提交',
							showCancel: false,
							success: (res) => {
								if (res.confirm) {
									uni.navigateBack();
								}
							}
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	@import '@/common/mixins.scss';

	.duration-container {
		display: flex;
		align-items: center;
	}

	.duration-input {
		width: 120rpx;
		height: 80rpx;
		background-color: #333;
		border-radius: 10rpx;
		text-align: center;
		color: #e0e0e0;
		font-size: 30rpx;
	}

	.duration-text {
		color: #e0e0e0;
		margin: 0 20rpx 0 10rpx;
		font-size: 28rpx;
	}

	.page-header {
		width: 100%;
		height: 200rpx;
		@include rounded-box(20upx, #FFD700);
		@include flex-center(center, center, column);
		margin-bottom: 30rpx;

		.page-header-title {
			font-size: 38rpx;
			color: #000;
			font-weight: bold;
			margin-bottom: 20rpx;
		}

		.page-header-con {
			font-size: 32rpx;
			color: #000;
		}
	}

	.container {
		padding: 30rpx;
		background-color: #2a2a2a;
	}

	.form-group {
		margin-bottom: 30rpx;
	}

	.form-label {
		margin-bottom: 15rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #FFD700;
	}

	.form-input {
		width: 100%;
		height: 80rpx;
		background-color: #333;
		border-radius: 10rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		color: #e0e0e0;
		font-size: 30rpx;
	}

	.date-input {
		line-height: 80rpx;
	}

	.form-textarea {
		width: 100%;
		height: 200rpx;
		background-color: #333;
		border-radius: 10rpx;
		padding: 20rpx;
		box-sizing: border-box;
		color: #e0e0e0;
		font-size: 30rpx;
	}

	.btn-submit {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 34rpx;
		font-weight: bold;
		color: #000;
		background-color: #FFD700;
		border-radius: 45rpx;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
	}

	/* 禁用状态的输入框样式 */
	.form-input[disabled] {
		background-color: #444;
		opacity: 0.8;
	}
</style>